<template>
  <div style="height: 100%;">
    <el-container style="margin:0;padding-top: 10px;">
      <el-header>
        <el-row type="flex" align="center" justify="space-between" class="el-col-24-clear w100">
          <el-col style="width: 30%">
            <el-card class="box-card-padding-clear  bor-1-ccc" style="margin-top: 0;">
              <!--<el-header class="lisa-bi-el-header">运力概况</el-header>-->
              <el-main>
                <el-row type="flex" align="bottom" justify="center" class="f10 el-col-24-clear w100">
                  <el-col v-if="safetyMainInfo.buyout" class="Highlight-bold pad-r10">{{safetyMainInfo.buyout}}</el-col>
                  <el-col v-else class="Highlight-bold pad-r10">0</el-col>
                  <el-col>次事故买断</el-col>
                  <el-col v-if="safetyMainInfo.buyout_rate" class="pad-l-r10"
                          :class="safetyMainInfo.buyout_rate_type === 'up'? 'redLight-bold': 'greenLight-bold'">
                    <i v-if="safetyMainInfo.buyout_rate_type === 'up'" class="el-icon-sort-up"></i>
                    <i v-else class="el-icon-sort-down"></i>
                    {{safetyMainInfo.buyout_rate}}
                  </el-col>
                  <el-col v-else class="redLight-bold pad-l-r10">
                    <i class="el-icon-sort-down"></i>0
                  </el-col>
                </el-row>
              </el-main>
            </el-card>
          </el-col>
          <el-col  style="width: 30%">
            <el-card class="box-card-padding-clear  bor-1-ccc" style="margin-top: 0;">
              <el-main>
                <el-row type="flex" align="bottom" justify="center" class="f10 el-col-24-clear w100">
                  <el-col v-if="safetyMainInfo.repair" class="Highlight-bold pad-r10">{{safetyMainInfo.repair}}</el-col>
                  <el-col v-else class="Highlight-bold pad-r10">0</el-col>
                  <el-col>次事故维修</el-col>
                  <el-col v-if="safetyMainInfo.accident_rate" class="pad-l-r10"
                          :class="safetyMainInfo.accident_rate_type === 'up'? 'redLight-bold': 'greenLight-bold'">
                    <i v-if="safetyMainInfo.accident_rate_type === 'up'" class="el-icon-sort-up"></i>
                    <i v-else class="el-icon-sort-down"></i>
                    {{safetyMainInfo.accident_rate}}
                  </el-col>
                  <el-col v-else class="redLight-bold pad-l-r10">
                    <i class="el-icon-sort-down"></i>0
                  </el-col>
                </el-row>
              </el-main>
            </el-card>
          </el-col>
          <el-col  style="width: 30%">
            <el-card class="box-card-padding-clear  bor-1-ccc" style="margin-top: 0;">
              <el-main>
                <el-row type="flex" align="bottom" justify="center" class="f10 el-col-24-clear w100">
                  <el-col v-if="safetyMainInfo.accident_sum_rate" class="Highlight-bold pad-r10">{{safetyMainInfo.accident_sum_rate}}</el-col>
                  <el-col v-else class="Highlight-bold pad-r10">0</el-col>
                  <el-col>累计事故率</el-col>
                  <el-col v-if="safetyMainInfo.rate_change" class="pad-l-r10"
                          :class="safetyMainInfo.rate_change_type === 'up'? 'redLight-bold': 'greenLight-bold'">
                    <i v-if="safetyMainInfo.rate_change_type === 'up'" class="el-icon-sort-up"></i>
                    <i v-else class="el-icon-sort-down"></i>
                    {{safetyMainInfo.rate_change}}
                  </el-col>
                  <el-col v-else class="redLight-bold pad-l-r10">
                    <i class="el-icon-sort-down"></i>0
                  </el-col>
                </el-row>
              </el-main>
            </el-card>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <div id="safetyDataCharts" class="clearFix bgc-fff card-shadow">
          <div class="clearFix">
            <canvas></canvas>
          </div>
        </div>
      </el-main>
      <el-footer>
        <el-row type="flex" align="center" justify="space-between" class="el-col-24-clear w100">
          <el-col style="width: 30%">
            <el-card class="box-card-padding-clear  bor-1-ccc" style="margin-top: 0;">
              <el-header class="lisa-bi-el-header" style="text-align: left;">运输方式事故排名</el-header>
              <el-main>
                <el-row type="flex" align="bottom" justify="space-between" class="f10 mb20 el-col-24-clear w100">
                  <el-col>人送</el-col>
                  <el-col>
                    <span v-if="rateByMeansInfo.drive" class="Highlight-bold pad-r10">{{rateByMeansInfo.drive}}</span>
                    <span v-else class="Highlight-bold pad-r10">0</span>
                    <span>次</span>
                  </el-col>
                </el-row>
                <el-row type="flex" align="bottom" justify="space-between" class="f10 mb20 el-col-24-clear w100">
                  <el-col>铁路运输</el-col>
                  <el-col>
                    <span v-if="rateByMeansInfo.raod" class="Highlight-bold pad-r10">{{rateByMeansInfo.raod}}</span>
                    <span v-else class="Highlight-bold pad-r10">0</span>
                    <span>次</span>
                  </el-col>
                </el-row>
                <el-row type="flex" align="bottom" justify="space-between" class="f10 mb20 el-col-24-clear w100">
                  <el-col>公路运输</el-col>
                  <el-col>
                    <span v-if="rateByMeansInfo.others" class="Highlight-bold pad-r10">{{rateByMeansInfo.others}}</span>
                    <span v-else class="Highlight-bold pad-r10">0</span>
                    <span>次</span>
                  </el-col>
                </el-row>
              </el-main>
            </el-card>
          </el-col>
          <el-col style="width: 30%">
            <el-card class="box-card-padding-clear  bor-1-ccc" style="margin-top: 0;">
              <el-header class="lisa-bi-el-header" style="text-align: left;">承运商事故排名</el-header>
              <el-main>
                <el-row v-for="(item,index) in rateByLspInfo" type="flex" align="bottom" justify="space-between" class="f10 mb20 el-col-24-clear w100">
                  <el-col>{{item.name}}</el-col>
                  <el-col>
                    <span v-if="item.value" class="Highlight-bold pad-r10">{{item.value}}</span>
                    <span v-else class="Highlight-bold pad-r10">0</span>
                    <span>次</span>
                  </el-col>
                </el-row>
              </el-main>
            </el-card>
          </el-col>
          <el-col style="width: 30%">
            <el-card class="box-card-padding-clear  bor-1-ccc" style="margin-top: 0;">
              <el-header class="lisa-bi-el-header" style="text-align: left;">车队事故排名</el-header>
              <el-main>
                <el-row v-for="(item,index) in rateByFleetInfo" type="flex" align="bottom" justify="space-between" class="f10 mb20 el-col-24-clear w100">
                  <el-col>{{item.name}}</el-col>
                  <el-col>
                    <span v-if="item.value" class="Highlight-bold pad-r10">{{item.value}}</span>
                    <span v-else class="Highlight-bold pad-r10">0</span>
                    <span>次</span>
                  </el-col>
                </el-row>
              </el-main>
            </el-card>
          </el-col>
        </el-row>
      </el-footer>
    </el-container>
  </div>
</template>

<script type="text/ecmascript-6">
  import echarts from 'echarts'
  import * as SafetyApi from '@/api/safety'
  // const MockOpDeliveryData = require('^/data/OpDelivery')
  export default {
    name: '',
    data() {
      return {
        safetyMainInfo: '',
        rateByMeansInfo: '',
        rateByLspInfo: [],
        rateByFleetInfo: []
      }
    },
    components: {
    },
    created() {
      this.initData()
    },
    mounted() {
    },
    methods: {
      initData() {
        SafetyApi.getSafetyInfo().then(res => {
          console.log('getSafetyInfo()-res', res)
          this.safetyMainInfo = res.data.main
          this.rateByMeansInfo = res.data.rate_by_means
          this.rateByLspInfo = res.data.rate_by_lsp
          this.rateByFleetInfo = res.data.rate_by_fleet
        }).catch(() => {})
        SafetyApi.getSafetyChartOne().then(res => {
          console.log('getSafetyChartOne()-res', res)
          const buyOutChartData = res.data.buyOut
          const maintainChartData = res.data.maintain
          this.initCharts(buyOutChartData, maintainChartData)
        }).catch(() => {})
      },
      initCharts(data1, data2) {
        const itemStyle = {
          normal: {
          },
          emphasis: {
            barBorderWidth: 1,
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowColor: 'rgba(0,0,0,0.5)'
          }
        }
        const myChart = echarts.init(document.getElementById('safetyDataCharts'))
        const brushed = []
        myChart.on('brushSelected', renderBrushed)
        function renderBrushed(params) {
          var brushComponent = params.batch[0]
          for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
            var rawIndices = brushComponent.selected[sIdx].dataIndex
            brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '))
          }
          return brushed
        }
        console.log('brushed', brushed)
        setTimeout(function() {
          myChart.dispatchAction({
            title: {
              backgroundColor: '#333',
              text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),
              bottom: 0,
              right: 0,
              width: 100,
              textStyle: {
                fontSize: 12,
                color: '#fff'
              }
            }
          })
        }, 0)
        const option = {
          title: {
            text: '事故分析 月份/次数',
            left: 'center',
            textStyle: {
              color: '#333'
            }
          },
          backgroundColor: '#fff',
          legend: {
            data: ['事故买断', '事故维修', 'bar3', 'bar4'],
            align: 'left',
            left: 10
          },
          brush: {
            toolbox: ['keep', 'clear'],
            xAxisIndex: 0
          },
          toolbox: {
            feature: {
              magicType: {
                type: ['stack', 'tiled']
              }
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line'
            },
            'formatter': '{b}月 事故分析<br/> {a} : {c}次数<br/> {a1} : {c1}次数'
          },
          xAxis: {
            data: data1.map(function(item) {
              return item.name
            }),
            name: '事故数量',
            silent: false,
            axisLine: { onZero: true },
            splitLine: { show: false },
            splitArea: { show: false }
          },
          yAxis: {
            inverse: true,
            splitArea: { show: false }
          },
          grid: {
            left: 100
          },
          visualMap: {
            show: false,
            type: 'continuous',
            dimension: 1,
            text: ['High', 'Low'],
            inverse: true,
            itemHeight: 200,
            calculable: true,
            min: 0,
            max: 300,
            top: 60,
            left: 10,
            inRange: {
              colorLightness: [0.4, 0.8]
            },
            outOfRange: {
              color: '#bbb'
            },
            controller: {
              inRange: {
                color: '#2f4554'
              }
            }
          },
          series: [
            {
              name: '事故买断',
              type: 'bar',
              stack: 'one',
              itemStyle: itemStyle,
              data: data1
            },
            {
              name: '事故维修',
              type: 'bar',
              stack: 'one',
              itemStyle: itemStyle,
              data: data2
            }
          ]
        }
        // 清空画布防止缓存
        myChart.clear()
        // 设置数据层 需先setOption() 后才能getComponent()
        myChart.setOption(option, true)
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  #safetyDataCharts{
    margin: 0 0 0 0;
    width:100%;
    height: 400px;
  }
</style>

